.quantization_container{
    width: 100%;
}

.quantization_container .quantization_container_top_logo{
    width:100%;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quantization_container .quantization_container_top_logo .quantization_container_top_logo_home{
    width: 80px;
    height: 40px;
}
.quantization_container .quantization_container_top_logo .quantization_container_top_logo_home_en{
    width: 160px;
    height: 40px;
}

.quantization_container .quantization_container_game{
    width: 100%;
    height: 96.56px;
    background: url(~@/image/aiQuantization/indexTop/item11.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: left;
    font-size: 14px;
    position: relative;;

    .quantization_container_game_bg1{
        height: 138%;
        width: auto;
        position: absolute;
        bottom: 0;
        right:0;
        z-index: 1;
    }

    .quantization_container_game_text{
        position: relative;
        margin-top: 20px;
        z-index: 2;
    }
    .quantization_container_game_btn{
        position: relative;
        margin-top: 16px;
        display:flex;
        z-index: 2;
                
        button{
            margin-right: 15px;
            background:@while;
            color: #8c5b92;
            border: none;
            border-radius: 100vh;
            font-size: 12px;
            width: 100px;
            height: 24px;
            white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            padding: 0 10px;
        };
    }
    // display: flex;
    // flex-wrap: wrap;
    // align-items: center;
    // justify-content: flex-start;
    // gap: 0.8rem;

    
}

.quantization_container .quantization_container_exclusive{
    width: 100%;
    min-height: 24vh;
    background: url(~@/image/aiQuantization/indexTop/orange.png);
    background-size: 110% 100%;
    background-repeat: no-repeat;
    background-position: center top;
}

.quantization_container .quantization_container_exclusive_title{
    width: 100%;
    font-size: @font-size-text;
    color: @while;
    display: flex;
    align-items: center;
    justify-content: start;
}
.quantization_container .quantization_container_exclusive_title img{
    width: 1.3rem;
    height: 1.3rem;
}
.quantization_container .quantization_container_exclusive_only{
    display: flex;
    align-items: center;
    justify-content: start;
}
.quantization_container .quantization_container_exclusive_only span{
    display: inline-block;
    padding: 0.2rem 0.4rem;
    background-color: rgba(255, 255, 255, 0.30);
    border: 1px solid @while;
    border-radius: 4px;
    font-size: 0.7rem;
}
.quantization_container .quantization_container_exclusive_content{
    width: 100%;
    display: flex;
    align-items: baseline;
}
.quantization_container .quantization_container_exclusive_content_left{
    font-size: 1.3rem;
}
.quantization_container .quantization_container_exclusive_content_right{
    font-size: 0.8rem;
}
.quantization_container .quantization_container_exclusive_content_money{
    width: 100%;
    display: flex;
    align-items: baseline;
    font-size: 0.8rem;
    font-weight: 300;
}
.quantization_container .quantization_container_exclusive_content_btn{
    padding: 0.4rem 0.7rem;
    border: none;
    background-color: @while;
    color: @sa-warning;
    font-size: 0.8rem;
    border-radius: 8px;
}
.quantization_container .quantization_container_meal{
    width: 100%;
}
.quantization_container .quantization_container_meal_top{
    width: 100%;
    min-height: 15vh;
    background: url(~@/image/aiQuantization/indexTop/item14.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}
.quantization_container .quantization_container_meal_top_title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .quantization_container_meal_top_title_left{
        font-size: @font-size-text;
        color: @while;
        display: flex;
        align-items: center;
        .img_one{
            width: 1.3rem;
            height: 1.3rem;
        }
        .img_two{
            width: 3.8rem;
            height: 1.3rem;
        }
    }
    .quantization_container_meal_top_title_right{
        padding: 0.2rem 0.5rem;
        background-color: rgba(255, 255, 255, 0.30);
        display: flex;
        align-items: center;
        font-size: 0.7rem;
        border-radius: 16px;
        span{
            line-height: 0.7rem;
        }
        img{
            width: 0.8rem;
            height: 0.8rem;
        }
    }
}
.quantization_container .quantization_container_meal_top_content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .quantization_container_meal_top_content_left{
        width: 35%;
    }
    .quantization_container_meal_top_content_right{
        width: 35%;
    }
    .quantization_container_meal_smallTitle{
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.50);
    }
    .quantization_container_meal_smallContent{
        font-size: 1.2rem;
        span{
            font-size: 0.7rem;
        }
    }
}

.quantization_container .quantization_container_meal_bottom{
    width: 100%;
    min-height: 40vh;
    background: url(~@/image/aiQuantization/indexTop/item13.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    .quantization_container_meal_bottom_earnings{
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: start;
        font-size: @font-size-text;
        span{
            font-size: 1.3rem;
        }
    }
    .quantization_container_meal_bottom_investment{
        .van-tabs__nav.van-tabs__nav--card{
            margin: 0;
            border: none;
            background-color: rgba(215, 215, 215, 0.3);
            border-radius: 5px;
            height: 1.5rem;
            .van-tab{
                color: @while;
                font-size: @font-size-text;
                border: none;
            }
            .van-tab--active{
                border: none;
                background-color: @while;
                border-radius: 5px;
                color: @btn-background-color;
            }
        }
    }
    .quantization_container_meal_bottom_input{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        input{
            border: none;
            height: 2.2rem;
            width: 60%;
            background-color: #30303068;
            border-radius: 8px;
            color: @while;
            font-size: 0.8rem;
            padding-left: 1rem;
            &::placeholder { /* 现代浏览器 */
                color: @while; // 使用变量中的白色
                opacity: 0.7;  // 设置透明度
            }
        }
        button{
            border: none;
            width: 37%;
            height: 2.2rem;
            border-radius: 8px;
            background-color: @while;
            color: @btn-background-color;
            font-size: 0.8rem;
            font-weight: 600;
        }
    }
    .quantization_container_meal_bottom_content{
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.6);
        .quantization_container_meal_bottom_content_title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.70);
        }
        .top_title{
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.9);
        }
    }
    .quantization_container_meal_bottom_hint{
        width: 100%;
        div{
            font-size: 0.7rem;
            color: rgba(255 , 255 , 255, 0.70);
            text-align: left;
            margin-bottom: 0.5rem;
        }
    }
}

.quantization_container .quantization_container_tendency{
    width: 100%;
    .quantization_container_tendency_topImage{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.70);
        img{
            height: 20px;
        }
    }
    .quantization_container_tendency_echarts{
        width: 100%;
        height: 21vh;
        background-color: @card-background-color;
        .quantization_container_tendency_echarts_content{
            width: 100%;
            height: 65%;
        }
        .quantization_container_tendency_echarts_btns{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            button{
                border: none;
                background-color: #20325B;
                color: @while;
                font-size: 0.8rem;
                padding: 0.3rem 0.8rem;
                border-radius: 5px;
            }
            .btnActive{
                background-color: @btn-background-color;
            }
        }
    }
}

.quantization_container .quantization_container_quantization{
    width: 100%;
    .quantization_container_quantization_topImage{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.70);
        img{
            height: 20px;
        }
    }
    .quantization_container_quantization_content{
        width: 100%;
        height: 17vh;
        background-color: @card-background-color;
        // position: relative; 
        .semi-progress-container {
            // width: 100%;
            height: 15vh;
            // 新增进度条容器样式
            // position: absolute;
            // top: 15%;
            // left: 0;
            // right: 0;
            // bottom: 0;
        }
    }
}

.quantization_container .quantization_container_market{
    width: 100%;
    .quantization_container_market_topImage{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.70);
        img{
            height: 20px;
        }
    }
    .quantization_container_market_list{
        width: 100%;
        min-height: 10vh;
        background-color: @card-background-color;
        .quantization_container_market_list_item{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .market_list_item_left{
                display: flex;
                min-width: 30%;
                justify-content: start;
                font-size: 0.9rem;
                align-items: center;
                img{
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 50%;
                }
            }
            .market_list_item_right{
                display: flex;
                justify-content: end;
                align-items: center;
                font-size: 0.7rem;
                .market_list_item_right_sps{
                    padding: 0.4rem 0.8rem;
                    border-radius: 5px;
                }
                .red{
                    color: #FF5722;
                }
                .green{
                    color: #04B383;
                }
                .greenBkg{
                    background-color: rgba(4, 179, 131, 0.1);
                }
                .redBkg{
                    background-color: rgba(255, 87, 34, 0.1);
                }
            }
        }
    }
}

/* ai量化我的订单页 */
.myOrder_container{
    width: 100%;
    .myOrder_container_headline{
        width: 100%;
        min-height: 22vh;
        background-color: @card-background-color;
        .myOrder_container_headline_top{
            padding: 0.5rem 0;
            width: 100%;
            min-height: 5vh;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.9rem;
            background: linear-gradient(to right, @btn-background-color, #005CDF);
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            .headline_top_left{
                display: flex;
                align-items: center;
            }
        }
        img{
            width: 1.6rem;
            height: 1.6rem;
        }
        .myOrder_container_meal{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: start;
            font-size: 0.9rem;
            color: @sa-success;
        }
        .myOrder_container_hr{
            width: 100%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            div{
                height: 1px;
                background-color: rgba(255,255,255,0.4);
                width: 100%;
            }
        }
        .headline_content{
            width: 100%;
            display: flex;
            padding-bottom: 1rem;
            align-items: center;
            justify-content: space-between;
            .headline_content_item{
                width: 24%;
                font-size: 0.8rem;
                .headline_content_item_title{
                    color: @btn-background-color;
                }
            }
        }
    }
    .myOrder_container_tabs{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .myOrder_container_tabs_item{
            width: 33%;
            color: #fff;
            font-size: 0.9rem;
        }
        .active{
            color: @btn-background-color;
        }
    }
    .myOrder_container_orderList{
        width: 100%;
        background-color: @card-background-color;
        font-size: 0.8rem;
        .orderList_title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .orderList_title_left{
                display: flex;
                align-items: center;
                color: @btn-background-color;
                img{
                    width: 1.2rem;
                    height: 1.2rem;
                }
            }
            .orderList_title_right{
                display: flex;
                align-items: center;
                .exclusive_icon{
                    color: #CD6383;
                    display: inline-block;
                    border: 1px solid #CD6383;
                    padding: 0.1rem 0.2rem;
                    border-radius: 15px;
                    font-size: 0.7rem;
                }
                /* 单独设置三种状态的样式 */
                .running_icon{
                    color: @sa-success;
                    display: inline-block;
                    border: 1px solid @sa-success;
                    padding: 0.1rem 0.2rem;
                    border-radius: 15px;
                    font-size: 0.7rem;
                }
                .redeeming_icon{
                    color: @sa-warning;
                    display: inline-block;
                    border: 1px solid @sa-warning;
                    padding: 0.1rem 0.2rem;
                    border-radius: 15px;
                    font-size: 0.7rem;
                }
                .expired_icon{
                    color: @sa-error;
                    display: inline-block;
                    border: 1px solid @sa-error;
                    padding: 0.1rem 0.2rem;
                    border-radius: 15px;
                    font-size: 0.7rem;
                }
            }
        }
        .orderList_date{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.7rem;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            .orderList_date_token{
                display: flex;
                align-items: center;
                img{
                    width: 1rem;
                    height: 1rem;
                }
            }
        }
        .orderList_content{
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: @subhead-color;
            .orderList_content_item_value{
                font-size: 1.3rem;
                span{
                    font-size: 0.7rem;
                }
            }
            .orderList_content_item_label{
                font-size: 0.7rem;
            }
        }
    }
}


/* ai量化订单详情页 */
.orderDetail_container{
    width: 100%;
    height: 100%;
    font-size: 0.9rem;
    .orderDetail_container_detail{
        width: 100%;
        min-height: 40vh;
        background-color: @card-background-color;
        .detail_title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .detail_title_left{
                display: flex;
                align-items: center;
                color: @btn-background-color;
                img{
                    width: 1.2rem;
                    height: 1.2rem;
                }
            }
            .detail_title_right{
                display: flex;
                align-items: center;
                .exclusive_icon{
                    color: #CD6383;
                    display: inline-block;
                    border: 1px solid #CD6383;
                    padding: 0.1rem 0.2rem;
                    border-radius: 15px;
                    font-size: 0.7rem;
                }
                /* 单独设置三种状态的样式 */
                .running_icon{
                    color: @sa-success;
                    display: inline-block;
                    border: 1px solid @sa-success;
                    padding: 0.1rem 0.2rem;
                    border-radius: 15px;
                    font-size: 0.7rem;
                }
                .redeeming_icon{
                    color: @sa-warning;
                    display: inline-block;
                    border: 1px solid @sa-warning;
                    padding: 0.1rem 0.2rem;
                    border-radius: 15px;
                    font-size: 0.7rem;
                }
                .expired_icon{
                    color: @sa-error;
                    display: inline-block;
                    border: 1px solid @sa-error;
                    padding: 0.1rem 0.2rem;
                    border-radius: 15px;
                    font-size: 0.7rem;
                }
            }
        }
        .detail_banner{
            width: 100%;
            height: 12.5vh;
            background: url(~@/image/aiQuantization/myOrder/pic_sy_bg@1x.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center top;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .detail_banner_left{
                width: 45%;
                text-align: left;
            }
            .detail_banner_right{
                width: 40%;
            }
            .detail_banner_left_title{
                font-size: 1.6rem;
                max-width: 100%;
                word-wrap: break-word;
                word-break: break-all;
                white-space: normal;
            }
            .detail_banner_left_value{
                font-size: 0.7rem;
            }
        }
        .detail_content{
            width: 100%;
            .detail_content_item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 0.8rem;
                margin-bottom: 0.8rem;
                .detail_content_item_label{
                    text-align: left;
                    color: @subhead-color;
                }
                .detail_content_item_value{
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    text-align: right;
                    color: rgba(255,255,255,0.6);
                    img{
                        width: 0.9rem;
                        height: 0.9rem;
                    }
                }
            }
        }
        .detail_content_btn{
            width: 100%;
            button{
                border: none;
                font-size: 1.1rem;
                color: @while;
                background-color: @btn-background-color;
                width: 95%;
                padding: 0.8rem 0;
            }
            button:disabled {
                background-color: darken(@btn-background-color, 15%);
            }
        }
    }
    .orderDetail_container_content{
        width: 100%;
        .orderDetail_container_content_title{
            width: 100%;
            font-size: 0.9rem;
            color: @while;
            text-align: left;
        }
        .orderDetail_container_content_item{
            width: 100%;
            height: 18vh;
            background-color: @card-background-color;
            .content_item_title{
                height: 30%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 0.9rem;
                border-bottom: 1px solid rgba(255,255,255,0.3);
                .content_item_title_left{
                    color: rgba(255, 255, 255, 0.4);
                    .content_item_title_left_label{
                        color: @btn-background-color;
                        font-weight: 600;
                    }
                }
                .green_icon{
                    color: @sa-success;
                }
                .red_icon{
                    color: @sa-error;
                }
            }
            .content_item_deal{
                height: 20%;
                color: rgba(255, 255, 255, 0.4);
                font-size: 0.8rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .content_item_ways{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 0.8rem;
                color: @while;
                .content_item_ways_item{
                    display: flex;
                    align-items: center;
                }
                img{
                    width: 1.2rem;
                    height: 1.2rem;
                }
            }
        }
    }
}